<template>
  <div class="input-box">
    <div
      class="input-content"
      @keydown="keydown"
      @keyup="keyup"
      @paste="paste"
      @mousewheel="mousewheel"
      @input="inputEvent"
    >
      <input
        max="9"
        min="0"
        maxlength="1"
        data-index="0"
        v-model.trim.number="input[0]"
        :type="inputType"
        ref="firstinput"
      />
      <input
        max="9"
        min="0"
        maxlength="1"
        data-index="1"
        v-model.trim.number="input[1]"
        :type="inputType"
      />
      <input
        max="9"
        min="0"
        maxlength="1"
        data-index="2"
        v-model.trim.number="input[2]"
        :type="inputType"
      />
      <input
        max="9"
        min="0"
        maxlength="1"
        data-index="3"
        v-model.trim.number="input[3]"
        :type="inputType"
      />
      <input
        max="9"
        min="0"
        maxlength="1"
        data-index="4"
        v-model.trim.number="input[4]"
        :type="inputType"
      />
      <input
        max="9"
        min="0"
        maxlength="1"
        data-index="5"
        v-model.trim.number="input[5]"
        :type="inputType"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "SixInput",
  data() {
    return {
      // 存放粘贴进来的数字
      pasteResult: [],
      // 输入框的类型
      inputType: this.type,
    };
  },
  props: {
    code: Array,
    // 输入框类型，不传则默认为number
    type: {
      default: "number",
      type: String,
    },
    // 初始化标志，如果为true，则会清空输入框，默认为false
    initFlag: {
      default: false,
      type: Boolean,
    },
  },
  computed: {
    input() {
      // code 是父组件传进来的默认值，必须是6位长度的数组，这里就不再做容错判断处理
      // 最后空数组是默认值
      return this.code || this.pasteResult.length === 6
        ? this.pasteResult
        : ["", "", "", "", "", ""];
    },
  },
  watch: {
    // 监视initFlag：true则代表要初始化输入框，默认为false
    initFlag(val) {
      if (val) {
        this.pasteResult = [];
        this.$emit("resetInitFlag");
      }
    },
  },
  methods: {
    // 解决一个输入框输入多个字符
    inputEvent(e) {
      if (e.target.value && e.target.value.length >= 6) {
        this.pasteResult = [...e.target.value];
        document.activeElement.blur();
        this.$emit("complete", this.input);
        return;
      }

      var index = e.target.dataset.index * 1;
      var el = e.target;
      this.$set(this.input, index, el.value.slice(0, 1));
    },
    keydown(e) {
      var index = e.target.dataset.index * 1;
      var el = e.target;
      if (e.key === "Backspace") {
        if (this.input[index].length > 0) {
          this.$set(this.input, index, "");
        } else {
          if (el.previousElementSibling) {
            el.previousElementSibling.focus();
            this.$set(this.input, index - 1, "");
          }
        }
      } else if (e.key === "Delete") {
        if (this.input[index].length > 0) {
          this.$set(this.input, index, "");
        } else {
          if (el.nextElementSibling) {
            this.$set(this.input, (index = 1), "");
          }
        }
        if (el.nextElementSibling) {
          el.nextElementSibling.focus();
        }
      } else if (e.key === "Home") {
        el.parentElement.children[0] && el.parentElement.children[0].focus();
      } else if (e.key === "End") {
        el.parentElement.children[this.input.length - 1] &&
          el.parentElement.children[this.input.length - 1].focus();
      } else if (e.key === "ArrowLeft") {
        if (el.previousElementSibling) {
          el.previousElementSibling.focus();
        }
      } else if (e.key === "ArrowRight") {
        if (el.nextElementSibling) {
          el.nextElementSibling.focus();
        }
      } else if (e.key === "ArrowUp") {
        if (this.input[index] * 1 < 9) {
          this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
        }
      } else if (e.key === "ArrowDown") {
        if (this.input[index] * 1 > 0) {
          this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
        }
      }
    },
    keyup(e) {
      var index = e.target.dataset.index * 1;
      var el = e.target;
      if (/Digit|Numpad/i.test(e.code)) {
        this.$set(this.input, index, e.code.replace(/Digit|Numpad/i, ""));
        el.nextElementSibling && el.nextElementSibling.focus();
        if (index === 5) {
          if (this.input.join("").length === 6) {
            document.activeElement.blur();
            this.$emit("complete", this.input);
          }
        }
      } else {
        if (this.input[index] === "") {
          this.$set(this.input, index, "");
        } else {
          el.nextElementSibling && el.nextElementSibling.focus();
          if (index === 5) {
            if (this.input.join("").length === 6) {
              document.activeElement.blur();
              this.$emit("complete", this.input);
            }
          }
        }
      }
      this.$emit("getNowInput", this.input);
    },
    mousewheel(e) {
      var index = e.target.dataset.index;
      if (e.wheelDelta > 0) {
        if (this.input[index] * 1 < 9) {
          this.$set(this.input, index, (this.input[index] * 1 + 1).toString());
        }
      } else if (e.wheelDelta < 0) {
        if (this.input[index] * 1 > 0) {
          this.$set(this.input, index, (this.input[index] * 1 - 1).toString());
        }
      } else if (e.key === "Enter") {
        if (this.input.join("").length === 6) {
          document.activeElement.blur();
          this.$emit("complete", this.input);
        }
      }
    },
    paste(e) {
      // 当进行粘贴时
      e.clipboardData.items[0].getAsString((str) => {
        if (str.toString().length === 6) {
          this.pasteResult = str.split("");
          document.activeElement.blur();
          this.$emit("complete", this.input);
        }
      });
    },
  },
  mounted() {
    // 等待dom渲染完成，在执行focus,否则无法获取到焦点
    this.$nextTick(() => {
      this.$refs.firstinput.focus();
    });
  },
};
</script>

<style lang="less" scoped>
.input-box {
  width: 100%;

  .input-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    input {
      display: flex;
      width: 100px;
      height: 116px;
      font-size: 18px;
      color: #333333;
      background-color: #3f4141;
      text-align: center;
      outline: none;
      border: 0;
      font-size: 48px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin-left: 10px;
    }
    input:nth-child(1) {
      margin-left: 0;
    }
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
}
</style>
